<template>
  <div id="app">
    <div id="up_div">
      <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="移库类型" prop="transferType">
        <el-radio-group v-model="queryParams.transferType"  @change="handleQuery">
          <el-radio-button
            v-for="item in transferType"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="移库状态" prop="transferStatus">
        <el-radio-group v-model="queryParams.transferStatus"  @change="handleQuery">
          <el-radio-button
            v-for="item in transferStatus"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="移库单号" prop="transferOrderNo">
        <el-input
          v-model="queryParams.transferOrderNo"
          placeholder="请输入移库单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="源仓库" prop="sourceWarehouseId">
        <el-cascader
          clearable
          v-model="sourceValue"
          :options="warehouseTree"
          :props="{ expandTrigger: 'hover',
                  checkStrictly: true,
                  value: 'id',// 告诉 Cascader 用 'id' 作为 value
                  label: 'label',// 用 'label' 作为显示文本
                  children: 'children' // 用 'children' 作为子节点
          }"
          filterable
          @change="sourceChange">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item label="目标仓库" prop="targetWarehouseAreaId">
        <el-cascader
          clearable
          v-model="targetValue"
          :options="warehouseTree"
          :props="{ expandTrigger: 'hover',
                  checkStrictly: true,
                  value: 'id',// 告诉 Cascader 用 'id' 作为 value
                  label: 'label',// 用 'label' 作为显示文本
                  children: 'children' // 用 'children' 作为子节点
          }"
          filterable
          @change="targetChange">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
      </div>
    </div>
    <div id="down_div">
      <div class="app-container">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:wmsTransfer:add']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:wmsTransfer:edit']"
            >修改</el-button>
          </el-col>
<!--          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:wmsTransfer:remove']"
            >删除</el-button>
          </el-col>-->
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:wmsTransfer:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="wmsTransferList" @selection-change="handleSelectionChange" stripe>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="expand" >
            <template #default="props">
              <h3>商品明细</h3>
              <el-divider></el-divider>
              <el-table :data="props.row.inventoryHistoryList" border>
                <el-table-column
                  prop="productName"
                  label="商品名称"
                  width="180">
                </el-table-column>
                <el-table-column label="商品编码" align="center" prop="productCode" />
                <el-table-column label="规格型号" align="center" prop="productSpec" />
                <el-table-column label="单位" align="center" prop="productUnit" >
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.wms_product_unit" :value="scope.row.productUnit">
                    </dict-tag>
                  </template>
                </el-table-column>
                <el-table-column label="商品单价" align="center" prop="unitPrice" />
                <el-table-column label="商品数量" align="center" prop="totalQuantity" />
                <el-table-column label="商品总价" align="center" prop="totalAmount" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="移库单号" align="center" prop="transferOrderNo" />
          <el-table-column label="移库类型" align="center" prop="transferType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_transfer_type" :value="scope.row.transferType"/>
            </template>
          </el-table-column>
          <el-table-column label="移库状态" align="center" prop="transferStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.wms_transfer_status" :value="scope.row.transferStatus"/>
            </template>
          </el-table-column>
          <el-table-column label="源仓库" align="center" prop="sourceWarehouseId" >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseSelect,scope.row.sourceWarehouseId) }}
            </template>
          </el-table-column>
          <el-table-column label="源库区" align="center" prop="sourceWarehouseAreaId" >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseAreaSelect,scope.row.sourceWarehouseAreaId) }}
            </template>
          </el-table-column>
          <el-table-column label="源货架" align="center" prop="sourceWarehouseRackId" >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseRackSelect,scope.row.sourceWarehouseRackId) }}
            </template>
          </el-table-column>
          <el-table-column label="源货位" align="center" prop="sourceWarehouseLocationId"  >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseLocationSelect,scope.row.sourceWarehouseLocationId) }}
            </template>
          </el-table-column>
          <el-table-column label="目标仓库" align="center" prop="targetWarehouseId"  >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseSelect,scope.row.targetWarehouseId) }}
            </template>
          </el-table-column>
          <el-table-column label="目标库区" align="center" prop="targetWarehouseAreaId"  >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseAreaSelect,scope.row.targetWarehouseAreaId) }}
            </template>
          </el-table-column>
          <el-table-column label="目标货架" align="center" prop="targetWarehouseRackId"  >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseRackSelect,scope.row.targetWarehouseRackId) }}
            </template>
          </el-table-column>
          <el-table-column label="目标货位" align="center" prop="targetWarehouseLocationId" >
            <template slot-scope="scope">
              {{ getSelectLabel(warehouseLocationSelect,scope.row.targetWarehouseLocationId) }}
            </template>
          </el-table-column>
          <el-table-column label="移库数量" align="center" prop="transferQuantity" />
          <el-table-column label="移库时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="移库人员" align="center" prop="nickName" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:wmsTransfer:edit']"
                :disabled="scope.row.transferStatus !== '2'"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-close"
                :disabled="scope.row.transferStatus !== '2'"
                @click="cancellation(scope.row)"
                v-hasPermi="['system:wmsInbound:remove']"
              >作废</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-printer"
                @click="handlePrint(scope.row)"
                :disabled="scope.row.transferStatus !== '1'"
                v-hasPermi="['system:wmsInbound:print']"
              >打印</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </div>
    </div>

    <!-- 隐藏的打印模板区域 -->
    <div ref="printSection" style="display:none; font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 14px; width: 800px; padding: 20px; box-sizing: border-box;">

      <!-- 打印头部 -->
      <div class="print-header" style="text-align: center; margin-bottom: 20px;">
        <h2 style="margin-bottom: 8px;">移库单详情</h2>
        <p>打印时间：{{ currentTime }}</p>
      </div>

      <!-- 上半部分两列 -->
      <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">

        <!-- 左列 -->
        <div style="width: 48%; line-height: 28px;">
          <p><strong>移库单号：</strong> {{ printData.transferOrderNo }}</p>
          <p><strong>移库类型：</strong> {{ getDictLabel('wms_transfer_type', printData.transferType) }}</p>
          <p><strong>移库状态：</strong> {{ getDictLabel('wms_transfer_status', printData.transferStatus) }}</p>
          <p><strong>源仓库：</strong> {{ getSelectLabel(warehouseSelect, printData.sourceWarehouseId) }}</p>
          <p><strong>源库区：</strong> {{ getSelectLabel(warehouseAreaSelect, printData.sourceWarehouseAreaId) }}</p>
          <p><strong>源货架：</strong> {{ getSelectLabel(warehouseRackSelect, printData.sourceWarehouseRackId) }}</p>
          <p><strong>源货位：</strong> {{ getSelectLabel(warehouseLocationSelect, printData.sourceWarehouseLocationId) }}</p>
        </div>

        <!-- 右列 -->
        <div style="width: 48%; line-height: 28px;">
          <p><strong>目标仓库：</strong> {{ getSelectLabel(warehouseSelect, printData.targetWarehouseId) }}</p>
          <p><strong>目标库区：</strong> {{ getSelectLabel(warehouseAreaSelect, printData.targetWarehouseAreaId) }}</p>
          <p><strong>目标货架：</strong> {{ getSelectLabel(warehouseRackSelect, printData.targetWarehouseRackId) }}</p>
          <p><strong>目标货位：</strong> {{ getSelectLabel(warehouseLocationSelect, printData.targetWarehouseLocationId) }}</p>
          <p><strong>备注：</strong> {{ printData.remark || '-' }}</p>
          <p><strong>移库时间：</strong> {{ parseTime(printData.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</p>
          <p><strong>移库数量：</strong> {{ printData.transferQuantity }}</p>
          <p><strong>移库人员：</strong> {{ printData.nickName }}</p>
        </div>

      </div>

      <!-- 下半部分：商品明细表格 -->
      <h3 style="margin-bottom: 8px;">商品明细</h3>
      <el-divider style="margin-bottom: 10px;"></el-divider>
      <table border="1" cellspacing="0" cellpadding="6" style="width: 100%; border-collapse: collapse; font-size: 13px;">
        <thead style="background-color: #f5f7fa;">
        <tr>
          <th>商品名称</th>
          <th>商品编码</th>
          <th>规格型号</th>
          <th>单位</th>
          <th>商品数量</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, idx) in printData.inventoryHistoryList" :key="idx">
          <td>{{ item.productName }}</td>
          <td style="text-align:center;">{{ item.productCode }}</td>
          <td style="text-align:center;">{{ item.productSpec }}</td>
          <td style="text-align:center;">{{ getDictLabel('wms_product_unit', item.productUnit) }}</td>
          <td style="text-align:right;">{{ item.totalQuantity }}</td>
        </tr>
        </tbody>
      </table>

      <!-- 底部 -->
      <div style="display: flex; justify-content: space-between; margin-top: 20px; font-size: 14px;">
        <div class="print-footer" style="line-height: 28px;">
          <p><strong>合计数量：</strong> {{ printData.transferQuantity }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listWmsTransfer, getWmsTransfer, delWmsTransfer, addWmsTransfer, updateWmsTransfer,getTransferOrderNo,cancellation } from "@/api/system/wmsTransfer"
import { queryWarehouseTree } from "@/api/system/treeVo"
import { getSupplierSelect,
  getWarehouseAreaSelect,
  getWarehouseSelect,
  getWarehouseRackSelect,
  getWmsWarehouseLocationSelect }  from "@/api/system/selectVo"

import printJS from 'print-js'

export default {
  name: "List",
  dicts: ['wms_transfer_type', 'wms_transfer_status','wms_product_unit'],
  data() {
    return {
      transferStatus:[
        {
          "value":"",
          "label":"全部"
        },
        {
          "value":"1",
          "label":"已移库"
        },
        {
          "value":"2",
          "label":"待移库"
        },
        {
          "value":"3",
          "label":"作废"
        },
      ],
      transferType:[
        {
          "value":"",
          "label":"全部"
        },
        {
          "value":"1",
          "label":"调拨"
        },
        {
          "value":"2",
          "label":"货位调整"
        },
      ],
      sourceValue: [],
      targetValue: [],
      warehouseTree: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 移库信息表格数据
      wmsTransferList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 移库操作人ID时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        transferOrderNo: null,
        transferType: "",
        transferStatus: "",
        sourceWarehouseId: null,
        sourceWarehouseAreaId: null,
        sourceWarehouseRackId: null,
        sourceWarehouseLocationId: null,
        targetWarehouseId: null,
        targetWarehouseAreaId: null,
        targetWarehouseRackId: null,
        targetWarehouseLocationId: null,
        itemId: null,
        transferQuantity: null,
        transferUserId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        transferOrderNo: [
          { required: true, message: "移库单号不能为空", trigger: "blur" }
        ],
        transferType: [
          { required: true, message: "移库类型不能为空", trigger: "change" }
        ],
        transferStatus: [
          { required: true, message: "移库状态不能为空", trigger: "change" }
        ],
        sourceWarehouseId: [
          { required: true, message: "源仓库ID不能为空", trigger: "blur" }
        ],
        sourceWarehouseAreaId: [
          { required: true, message: "源库区ID不能为空", trigger: "blur" }
        ],
        sourceWarehouseRackId: [
          { required: true, message: "源货架ID不能为空", trigger: "blur" }
        ],
        sourceWarehouseLocationId: [
          { required: true, message: "源货位ID不能为空", trigger: "blur" }
        ],
        targetWarehouseId: [
          { required: true, message: "目标仓库ID不能为空", trigger: "blur" }
        ],
        targetWarehouseAreaId: [
          { required: true, message: "目标库区ID不能为空", trigger: "blur" }
        ],
        targetWarehouseRackId: [
          { required: true, message: "目标货架ID不能为空", trigger: "blur" }
        ],
        targetWarehouseLocationId: [
          { required: true, message: "目标货位ID不能为空", trigger: "blur" }
        ],
        itemId: [
          { required: true, message: "商品ID不能为空", trigger: "blur" }
        ],
        transferQuantity: [
          { required: true, message: "移库数量不能为空", trigger: "blur" }
        ],
      },
      supplierSelect:[],
      warehouseAreaSelect:[],
      warehouseSelect:[],
      warehouseRackSelect:[],
      warehouseLocationSelect:[],

      printData: {},      // 当前打印行数据
      currentTime: '',    // 打印时间
    }
  },
  created() {
    //查询仓库树形结构
    this.getWarehouseTree();
    this.getSelect()
    this.getList()
  },
  methods: {
    /** 查询移库信息列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0]
        this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1]
      }
      listWmsTransfer(this.queryParams).then(response => {
        this.wmsTransferList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        transferOrderNo: null,
        transferType: null,
        transferStatus: null,
        sourceWarehouseId: null,
        sourceWarehouseAreaId: null,
        sourceWarehouseRackId: null,
        sourceWarehouseLocationId: null,
        targetWarehouseId: null,
        targetWarehouseAreaId: null,
        targetWarehouseRackId: null,
        targetWarehouseLocationId: null,
        itemId: null,
        transferQuantity: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        transferUserId: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = []
      this.sourceValue = null;
      this.targetValue = null;
      this.form ={};
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      //判断选中的数据的入库状态是入库则禁止修改
      if(selection.length==1){
        this.single = selection[0].transferStatus==='1'
      }
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      getTransferOrderNo().then(response => {
        var transferOrderNo = response.data.transferOrderNo;
        this.$emit("goNextAdd",transferOrderNo)
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getWmsTransfer(id).then(response => {
        this.$emit("goNextEdit",response.data)
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateWmsTransfer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addWmsTransfer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除移库信息编号为"' + ids + '"的数据项？').then(function() {
        return delWmsTransfer(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/wmsTransfer/export', {
        ...this.queryParams
      }, `wmsTransfer_${new Date().getTime()}.xlsx`)
    },
    sourceChange(value) {
      console.log(JSON.stringify(value));
      this.queryParams.sourceWarehouseId= value[0] || null;          // 第1个元素或null
      this.queryParams.sourceWarehouseAreaId= value[1] || null;      // 第2个元素或null
      this.queryParams.sourceWarehouseRackId= value[2] || null;      // 第3个元素或null
      this.queryParams.sourceWarehouseLocationId= value[3] || null; // 第4个元素或null

    },
    targetChange(value) {
      console.log(JSON.stringify(value));
      this.queryParams.targetWarehouseId = value[0] || null;         // 第1个元素或null
      this.queryParams.targetWarehouseAreaId= value[1] || null;      // 第2个元素或null
      this.queryParams.targetWarehouseRackId= value[2] || null;    // 第3个元素或null
      this.queryParams.targetWarehouseLocationId= value[3] || null;  // 第4个元素或null

    },
    /**
     * 获取仓库树形结构
     */
    getWarehouseTree(){
      queryWarehouseTree().then( response => {
        this.warehouseTree = response.data;

      })
    },
    getSelectLabel(selectList, id) {
      if (!selectList || !id) return '-'
      const item = selectList.find(i => i.value === id)
      return item ? item.label : (id || '-')
    },
    //获取下关的下拉框
    getSelect(){
      getSupplierSelect().then(response => {
        this.supplierSelect = response.data
      });
      getWarehouseAreaSelect().then(response => {
        this.warehouseAreaSelect = response.data
      });
      getWarehouseSelect().then(response => {
        this.warehouseSelect = response.data
      });
      getWarehouseRackSelect().then(response => {
        this.warehouseRackSelect = response.data
      });
      getWmsWarehouseLocationSelect().then(response => {
        this.warehouseLocationSelect = response.data
      });
    },
    cancellation(row) {
      this.$modal.confirm('是否确认作废盘库信息编号为"' + row.transferOrderNo + '"的数据项？').then(function() {
        return cancellation(row.id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("作废成功")
      }).catch(() => {})
    },

    /** 打印按钮操作 */
    handlePrint(row) {
      // 深拷贝，避免污染表格中显示的原始数据
      this.printData = JSON.parse(JSON.stringify(row));
      if (this.printData.barcodeImageUrl) {
        this.printData.barcodeImageUrl = process.env.VUE_APP_BASE_API + this.printData.barcodeImageUrl;
      }
      this.currentTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
      this.$nextTick(() => {
        printJS({
          printable: this.$refs.printSection.innerHTML,
          type: 'raw-html',
          style: `
        body { font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 14px; }
        .print-header h2 { color: #333; margin-bottom: 10px; }
        table, th, td { border: 1px solid #ddd; border-collapse: collapse; }
        th, td { padding: 6px; text-align: center; }
        th { background-color: #f5f7fa; font-weight: bold; }
        .print-footer { margin-top: 20px; font-weight: bold; }
        .strong-label { font-weight: bold; min-width: 80px; display: inline-block; }
      `,
          scanStyles: false
        })
      })
    },

    getDictLabel(dictType, value) {
      // 特别处理移库类型和状态的显示
      if (dictType === 'wms_transfer_type') {
        const transferTypeMap = {
          '1': '调拨',
          '2': '货位调整'
        }
        return transferTypeMap[value] || value || '-'
      }

      if (dictType === 'wms_transfer_status') {
        const transferStatusMap = {
          '1': '已移库',
          '2': '待移库',
          '3': '已作废'
        }
        return transferStatusMap[value] || value || '-'
      }

      const dict = this.dict.type[dictType] || []
      const item = dict.find(d => d.value === value)
      return item ? item.label : (value || '-')
    },

    parseTime(time, format) {
      if (!time) return '-'
      const date = new Date(time)
      const y = date.getFullYear()
      const m = (date.getMonth() + 1).toString().padStart(2, '0')
      const d = date.getDate().toString().padStart(2, '0')
      const h = date.getHours().toString().padStart(2, '0')
      const i = date.getMinutes().toString().padStart(2, '0')
      const s = date.getSeconds().toString().padStart(2, '0')

      if (format) {
        return format
          .replace('{y}', y)
          .replace('{m}', m)
          .replace('{d}', d)
          .replace('{h}', h)
          .replace('{i}', i)
          .replace('{s}', s)
      }
      return `${y}-${m}-${d} ${h}:${i}:${s}`
    }
  }
}
</script>
<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
//background-color: #f4f4f4;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3px;
}

#up_div {
  background-color: white;
  height: 30%;
  width: 100%;
  margin-bottom: 20px; /* Space between the two divs */
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px; /* Optional rounded corners */
}

#down_div {
  background-color: white;
  height: 70%;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px; /* Optional rounded corners */
}
</style>
